<template>
	<view class="content">
		<view class="d-kuan-juzhong  d-beijing-hui3">
			<!--头部-->
    	    <view class="d-kuan pc-dingbu">
    	        <DToubu ref="dToubu" 
				@clear-audio="clearAllAudio" 
				@login-success="handleLogin"
				@logout-success="handleLogout"
				:dengluxianshi="denglu_xianshi"
				@update-dengluxianshi="handleUpdateDengluxianshi"
				></DToubu>
    	    </view>
		
			<!--头部-->
			<!--下面内容-->
			<view class="d-kuan d-buhuanhang" >
				<!--左边导航-->
				<view class="d-daohang d-you-10 pc-yincang" id="zuo-daohang" :style="{height: leftNavHeight}">
					<view class="d-daohang-5">
						<Ddaohang  @denglu-fabu="denglu_fabu"></Ddaohang>
					</view>
					

				</view>
				<!--左边导航-->
				<!--右边内容 margin-left: 520rpx-->
				<view class="d-kuan pc-zuo-520">
					<uv-row customStyle="margin-bottom: 10px;align-items: flex-start;" :gutter="20">
						<uv-col span="8" id="zhongjiankuan" customStyle="align-items: flex-start;">
							<view  class="d-kuan d-beijing-bai you-guding d-pinglun-0" :style="{height: leftNavHeight,width: zhongjianWidth}">
								<view class=""  style="height: 100%; display: flex; flex-direction: column;">
									<view class="d-kuan guntiao" style="height: 100%; overflow-y: auto;margin-bottom: 110rpx;">

										    <!--返回-->
											<view class="d-guding-1" >
												<uv-navbar leftText="返回" :fixed="false" title="帖子详情" :safeAreaInsetTop="false" customStyle="border-radius: 20rpx;" bgColor="#f3f3f3">
			                						<template v-slot:left >
			                							<view class="uv-nav-slot" @click="fanhui">
			                								<uv-icon name="arrow-left" size="19" ></uv-icon>
			                								<!--uv-line direction="column" :hairline="false" length="16" margin="0 8px"></uv-line-->
			                								<!--uv-icon name="home" size="20"></uv-icon-->
			                							</view>
			                						</template>
			                					</uv-navbar>
											</view>
											<view class="d-bianhua-10 ">
												<!--头像-->
												<view class="d-kuan ">
													<view class="d-baifen-50 d-zuo d-buhuanhang">
														<view class="d-gaokuang-40 d-kuanggao-40 d-yuanjiao-40 d-box" @click="getgeren(tie.uid)">
														    <image v-if="tie.touxiang" :src="tie.touxiang" mode="aspectFill" class="d-img-40 d-yuanjiao-50 d-beijing-hui d-img-anhei"></image>
															<image v-else src="/static/assets/images/avatar.png" mode="aspectFill" class="d-img-40 d-yuanjiao-50 d-beijing-hui d-img-anhei"></image>
														</view>
														<view class="d-kuan d-zuo-10" @click="getgeren(item.uid)">
															<view class="d-wenzi-14 d-jiacu d-wenzi-hei">{{ tie.mingcheng }} </view>
															<view class="d-wenzi-14 d-wenzi-yanse-hui">{{ tie.fabushijian }}</view>
														</view>
													</view>
													<view class="d-baifen-50 d-you">
														<view class=" d-neirong-you d-you" >
															<uv-tags 
															v-if="guanzhu_panduan==0"
															text="关注" 
															size="mini"
															type="success" 
															shape="circle" 
															icon="plus" 
															plain 
															plainFill
															bgColor="#ffffff"
															borderColor="#02c7b6"
															color="#02c7b6"
															iconColor="#02c7b6"
															@click="postGuanzhu_api()"
															></uv-tags>
															<uv-tags 
															v-else-if="guanzhu_panduan==1"
															text="已关注" 
															size="mini"
															type="success" 
															shape="circle" 
															icon="checkbox-mark" 
															plain 
															plainFill
															bgColor="#ffffff"
															borderColor="#d4d4d4"
															color="#b6b5b5"
															iconColor="#02c7b6"
															@click="postGuanzhu_api()"
															></uv-tags>


															<!--view v-if="denglu_xianshi == 1" @click="getGuanzhus(index,item.uid)" class="d-you d-kuan-40 d-beijing-hei d-wenzi-yanse-bai-0 d-neikuang-zuoyou-2-shangxia-4 d-wenzi-12 d-yuanjiao-50 d-neirong-juzhong" >已关注</view>
															<view v-else @click="getGuanzhus(index,item.uid)" class="d-kuan-40 d-beijing-hui-f6 d-wenzi-hei d-neikuang-zuoyou-2-shangxia-4 d-wenzi-12 d-yuanjiao-50 d-neirong-juzhong" >关 注</view-->
														</view>
													</view>
												</view>
												<!--内容-->
												<view class="d-kuan">
													<view class="d-clear"></view>
													<view class="d-kuan d-shang-10">
	                        					        <view class="d-neirong">
															<uv-parse :content="tie.neirong_data"></uv-parse>
														</view>
													</view>
												
												
												</view>



											</view>



    	                        		<!--评论框-->
    	                        		<view class="d-pinglun-2 pc-pinglun-gao" >
											<!--评论-->
											<view class="d-kuan  ">
											
													<view class="d-neikuang-10">
														<uv-row customStyle="flex-wrap: wrap;padding: 6rpx;" :gutter="20" wrap>
															<uv-col span="3" >
																<view class="d-biaoqian">
																	<uv-tags 
																	:text="tie.quanzi" 
																	type="success" 
																	shape="circle" 
																	icon="tags-fill" 
																	plain 
																	plainFill
																	bgColor="#ffffff"
																	borderColor="#02c7b6"
																	color="#02c7b6"
																	iconColor="#02c7b6"
																	></uv-tags>
																</view>
															
															</uv-col>
															<uv-col span="6" >
																<uv-row customStyle="flex-wrap: wrap" :gutter="20" wrap>
																	<uv-col span="4" >
																		<uv-icon name="chat" @click="tiwenzhi()" color="#bbbbbb" size="28" :label="commentData.readNumer" labelColor="#bbbbbb"></uv-icon>
																	</uv-col>
																	<uv-col span="4" @click="postShoucang_api">
																		<uv-icon v-if="shoucang_panduan==0" name="heart" color="#bbbbbb" size="28" :label="shoucang_shu" labelColor="#bbbbbb"></uv-icon>
																		<uv-icon v-else-if="shoucang_panduan==1" name="heart" color="#02c7b6" size="28" :label="shoucang_shu" labelColor="#bbbbbb"></uv-icon>
																	</uv-col>
																	<uv-col span="4" @click="postDianzan_api">
																		<uv-icon v-if="dianzan_panduan==0" name="thumb-up" color="#bbbbbb" size="28" :label="dianzan_shu" labelColor="#bbbbbb"></uv-icon>
																		<uv-icon v-else-if="dianzan_panduan==1"  name="thumb-up" color="#02c7b6" size="28" :label="dianzan_shu" labelColor="#bbbbbb"></uv-icon>
																	</uv-col>
																</uv-row>
															
															</uv-col>
															<uv-col span="3" customStyle="display: flex; justify-content: flex-end; ">
																<view class="d-kuan" style="display: flex; justify-content: flex-end; ">
																	<uv-avatar-group :urls="dianzan_touxiang" size="26" gap="0.4"></uv-avatar-group>
																</view>
															</uv-col>
														</uv-row>
													</view>
													</view>
										</view>
									</view>
								</view>
    	                    </view>

							<!--内容-->
						</uv-col>
						<uv-col class="pc-yincang" span="4" id="youbiankuan" customStyle="align-items: flex-start;">
							<view  class="d-kuan beijing-pinglun you-guding d-pinglun-0" id="yuedu_gao" :style="{height: leftNavHeight,width: rightColWidth}">
    	                        <view class="d-neikuang-10"  style="height: 100%; display: flex; flex-direction: column;">
									<view class="d-kuan guntiao" style="height: 100%; margin-bottom: 110rpx;">
										<view class="d-clear"></view>
										<!--评论-->
										<view class="d-clear"></view>
										<view class="d-kuan">
											<HbComment 
											    ref="hbComment" 
												@load-more="handleLoadMore"
												@huifu2="huifu_2"
												@add="add"
												@del="del" 
												@like="like" 
												@focusOn="focusOn" 
												@tiwenzhi="tiwenzhi"
												:deleteTip="'确认删除？'"
											    :cmData="commentData" 
												:nodata="no_data"
												v-if="commentData">
											</HbComment>
											<view id="dibu"></view>


										</view>


									</view>
								

    	                        </view>
    	                        <!--评论框-->
    	                        <view class="d-pinglun-2 pc-pinglun-gao"  >
									<view class="d-neikuang-10">
										<view v-if="pinglunzxianshi==0" @click.stop="tiwenzhi()">
										    <uv-search    searchIcon="account" placeholder="评论" v-model="tiwenneirong" :showAction="true" actionText="提问" :animation="true"></uv-search>
										</view>
										<view v-if="pinglunzxianshi==1" class="d-kuan d-tijiao-0 " style="position:absolute;bottom:10px;left:0;right:0;height:200rpx;background:#fff;border-top:1px solid #eee">
											<view class="d-neikuang-10">
												<view v-if="pinglun_uid" class="d-tijiao-3">@{{ pinglun_uid }}</view>
												<uv-textarea ref="commentTextarea" @input="pingluninput" @blur="handleTextareaBlur" v-model="tiwenneirong" placeholder="请输入内容"></uv-textarea>
												<view v-if="nickName && yinyong_neirong" class="d-tijiao-4 d-chaochu-1" >{{ nickName }} ： {{ yinyong_neirong }}</view>
												<view class="d-tijiao-1"  @click.stop="tijiao_wenda">提交</view>
												<!--view class="d-tijiao-2" @click.stop="tiwenzhi">
													<uv-icon name="close" size="20" color="#a7a7a7"></uv-icon>
												</view-->


											</view>
										</view>
									</view>
									

								</view>

    	                    </view>
						</uv-col>
					</uv-row>
				

				</view>
				<!--右边内容-->

			</view>
			<!--下面内容-->





		</view>


	</view>

</template>

<script>
    import Api from '@/utils/api.js';
	import { getRequest,postRequest } from '@/utils/wxRequest.js';
    import DToubu from '@/components/d-toubu/d-toubu.vue';
	import NlAudioPlayer from '@/uni_modules/nl-audio-player/components/nl-audio-player/nl-audio-player.vue';
	import HbComment from '@/uni_modules/hb-comment/components/hb-comment/hb-comment.vue'; // 添加这行
	import Ddaohang from '@/components/d-daohang/d-daohang.vue'
	export default {
		data() {
			return {
				title: 'Hello',
				leftNavHeight: '500rpx', // 默认高度
                rightColWidth: '20%', // 默认宽度
				zhongjianWidth: '40%', // 默认宽度
				daohang: [
					{
						id:'1',
						name: '首页', 
						icon: 'home',

					},
					{
						id:'2',
						name: '心理学', 
						icon: 'home',
						erji: [	
							{id: '2-1', name: '情绪管理'},
					    	{id: '2-2', name: '心理疗愈'},
					    	{id: '2-3', name: '行为心理学'}
						]
					},
					
				],
                list: [
                    {
                        id: '1',
                        name: '课程介绍',
                        title: 'tab1',
                        content: 'tab1内容',
                    },
                    {
                        id: '2',
                        name: '课程内容',
                        title: 'tab2',
                        content: 'tab2内容',
                    },
                ],
                neirong_id_data:1,
				erjidata:[],
				erjiindex:'',//当前激活的二级菜单索引
				activeIndex: -1, // 当前激活的一级菜单索引
                baseList:[
                    {
                        name: 'question-circle',
                        title: '已试读/可试读',
                        yidu:1,
                        kedu:2,
                        gengxin:1,
                    },
                    {
                        name: 'play-circle',
                        title: '已经更新',
                        gengxin:1,
                    },
                    {
                        name: 'share',
                        title: '已经学习',
                        gengxin:1,
                    },
                    {
                        name: 'share',
                        title: '分享'
                    }

                ],
				content: `
                    <p>这是一个段落。</p>
                    <p>这是另一个段落。</p>
                `,
                yuedu:false,
				audioUrl:'/static/mp3/mp3.mp3',
				pinglunzxianshi:0,
				commentData: {
					readNumer: 0,
    				comment: [],
				},
				like_1: false, // 确保所有模板中用到的属性都已定义
				tiwenneirong:'',
				rightColLeft: '0px', // 添加这个属性
				denglu_xianshi:0, // 登录显示
				id: 0, // 帖子ID
				cid: 0, // 圈子ID	
				tie:[]	,//帖子数据	
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg'
				],
				dianzan_panduan:0, // 点赞判断
				dianzan_shu:0, // 点赞数量
				dianzan_touxiang:[], // 点赞头像

				shoucang_panduan:0, // 收藏判断
				shoucang_shu:0, // 收藏数量
				pinglun_list:[], // 评论列表
				page: 1, // 评论当前页码
				no_data:false, // 评论是否有数据
				pinglun_uid:'', // 评论用户ID
				pinglun_touid:'', // 评论回复用户ID
				pinglun_id:0, // 评论ID
				yinyong_neirong:'', // 评论引用内容
				nickName:'', // 评论用户昵称
				guanzhu_panduan:'0', // 判断关注
				
				
				
				
			
									
			}
		},
        components: {
          DToubu,
		  NlAudioPlayer,
		  HbComment, // 添加这行
		  Ddaohang
        },
		mounted() {
			
    	    this.setLeftNavHeight();
            this.getRightColWidth(); // 添加这行
			this.getzhongjianWidth(); // 添加这行
    	    // 添加窗口大小变化监听
    	    window.addEventListener('resize', this.setLeftNavHeight);
            window.addEventListener('resize', this.getRightColWidth); // 添加窗口大小变化监听
			window.addEventListener('resize', this.getzhongjianWidth); // 添加窗口大小变化监听
    	},
    	beforeDestroy() {
    	    // 移除监听
    	    window.removeEventListener('resize', this.setLeftNavHeight);
            window.removeEventListener('resize', this.getRightColWidth); // 添加这行
			window.removeEventListener('resize', this.getzhongjianWidth); // 添加窗口大小变化监听
			this.clearAllAudio();
    	},
		onShow(){
			this.getDianzan_panduan_api(); //点赞判断
			this.getShoucang_panduan_api(); //收藏判断
			this.getDianzan_touxiang_api(); // 点赞头像
			this.getPinglun_list_api(); // 获取评论列表

		},
		onLoad(e) {
			// 获取URL参数
			this.id = e.id || '';
    		this.cid = e.cid || '';
    		console.log('获取到的参数:', {id: this.id, cid: this.cid});
			this.getTiezi_api(); // 调用获取帖子详情的方法
			
			
		},
		computed: {
		  	yidenglu() {
		  	  return (this.$store.state.memberuid && this.$store.state.keycode) ? 1 : 0;
		  	},
		  	touxiang() {
		  	  return this.$store.state.member? this.$store.state.member.avatar : '';
		  	},
		  	name1() {
		  	  return this.$store.state.member? this.$store.state.member.name : '';
		  	},
			uid() {
		  	  return this.$store.state.memberuid;
		  	},
		  	keycode() {
		  	  return this.$store.state.keycode;
		  	}
		},

		onUnload() {
  		  this.clearAllAudio();
  		},
		methods: {
			//获取url的参数 id 和 cid
			getUrlParam(name) {
				const url = decodeURIComponent(window.location.href);
				const reg = new RegExp(`[?&]${name}=([^&]*)`, 'i');
				const match = url.match(reg);
				return match ? match[1] : '';
			},
			// ...其他方法保持不变...
			yiji(index) {
    		  // 切换激活的一级菜单
    		  this.activeIndex = index;
    		  // 根据激活的一级菜单显示对应的二级菜单
    		  this.erjidata = this.daohang[index].erji;
			  console.log(this.erjidata);
    		},
			erji(index) {
    		  // 切换激活的二级菜单
    		  this.erjiindex = index;
    		},
			toggleErji(index) {
    		  if (this.activeIndex === index) {
    		    // 点击已激活的菜单，收起二级菜单
    		    this.activeIndex = -1;
    		    this.currentErji = [];
    		  } else {
    		    // 点击新的菜单，显示对应的二级菜单
    		    this.activeIndex = index;
    		    this.currentErji = this.daohang[index].erji;
    		  }
    		},
			setLeftNavHeight() {
        	    // 获取系统信息
        	    const systemInfo = uni.getSystemInfoSync();
        	    // 计算可用高度（可根据实际需求调整计算方式）
        	    const windowHeight = systemInfo.windowHeight;
				console.log(windowHeight);
				if(windowHeight >= 768){
					const headerHeight = 60; // 头部高度估计值
        	    	const calculatedHeight = windowHeight - headerHeight;
        	    	// 设置左边导航高度
        	    	this.leftNavHeight = `${calculatedHeight}px`;


				} else {
					const headerHeight = 0; // 头部高度估计值
        	    	const calculatedHeight = windowHeight - headerHeight;
        	    	// 设置左边导航高度
        	    	this.leftNavHeight = `${calculatedHeight}px`;


				}

        	},
            // ...其他方法...
            getRightColWidth() {
				const systemInfo = uni.getSystemInfoSync();
				const windowWidth = systemInfo.windowWidth; // 获取浏览器/设备宽度
               this.$nextTick(() => {
                 const query = uni.createSelectorQuery().in(this);
				 //获取浏览器的宽度
				 

                 query.select('#youbiankuan').boundingClientRect(rect => {
                   if (rect) {
                     /*this.rightColWidth = `${rect.width+20}px`;
                     console.log('右侧列宽度:', this.rightColWidth);*/
					 if(windowWidth > 920) {
						this.rightColWidth = `${rect.width}px`;
					 } else {
						this.rightColWidth = '100%';
					 }
					 	
                    	this.rightColLeft = `${rect.left}px`; // 计算左侧位置
                    	console.log('右侧列位置:', this.rightColLeft);
                   }
                 }).exec();
               });
            },
			getzhongjianWidth() {
				// 先获取系统信息
				const systemInfo = uni.getSystemInfoSync();
    			const windowWidth = systemInfo.windowWidth;
               this.$nextTick(() => {
                 const query = uni.createSelectorQuery().in(this);
				 
                 query.select('#zhongjiankuan').boundingClientRect(rect => {
                   if (rect) {
                     
					if(windowWidth > 920) {
					 	this.zhongjianWidth = `${rect.width-20}px`;
					} else {
						this.zhongjianWidth = '100%';
					}
                    	//this.rightColLeft = `${rect.left}px`; // 计算左侧位置
                    	//console.log('右侧列位置:', this.rightColLeft);
                   }
                 }).exec();
               });
            },

            // 返回
            fanhui() {
				// 先清理音频
				this.clearAllAudio();
               // 获取页面栈
                 const pages = getCurrentPages();
                 // 如果页面栈长度小于等于1，说明没有上一级页面
                 if (pages.length <= 1) {
                    console.log('没有上一级页面');
                    uni.reLaunch({
                      url: '/pages/index/index'
                    });
                 } else {
                    // 有上一级页面则返回
                    uni.navigateBack({
                      delta: 1
                    });
                }
            },
            neirong_id(e){
                this.neirong_id_data = e.id;
                console.log(e.id);
            },
            tiwen(e){
				if (!this.denglu_jiance()) return;
                console.log('tiwen',e);
                this.yuedu = true;
            },
            yuedu_data(e){
				if (!this.denglu_jiance()) return false; // 明确返回 false
 				 console.log('yudu0000000000000',e);
 				 this.yuedu = true;
 				 return true; // 执行成功返回 true
            },
            guanbi(){
                this.yuedu = false;
				if(this.$refs.audioPlayer) {
    			  const audioCtx = this.$refs.audioPlayer.getAudioContext();
    			  audioCtx.stop();
    			  audioCtx.destroy();
    			}
            },
			// 关闭播放音频
			clearAllAudio() {
    		  if(this.$refs.audioPlayer) {
    		    const audioCtx = this.$refs.audioPlayer.getAudioContext();
    		    audioCtx.stop();
    		    audioCtx.destroy();
    		  }
    		},
			add(e) {
    		  console.log('add', e);
    		  // 这里可以添加评论逻辑
    		},
    		del(e) {
    		  console.log('del', e);
    		  // 这里可以删除评论逻辑
    		},
    		like(e) {
    		  console.log('like', e);
    		},
			focusOn(e) {
    		  console.log('focusOn', e);
    		},
			tiwenzhi(uid,touid,id,yinyongneirong){
				//判断是否空值uid
				if(!uid) {
    			    this.pinglun_uid = '';
    			    
    			} else {
    			    //用户
                    this.pinglun_uid = uid;
				}

                this.pinglunzxianshi = this.pinglunzxianshi === 1 ? 0 : 1;
				this.nickName = touid;
				
				this.yinyong_neirong = yinyongneirong;
				//被评论的用户
				this.pinglun_touid = touid;
				//评论的id
				this.pinglun_id = id;
				//打印
				console.log('评论用户',this.pinglun_uid,this.pinglun_touid,this.pinglun_id,this.yinyongneirong);
				if(this.pinglunzxianshi === 1) {
                    this.$nextTick(() => {
                        setTimeout(() => {
                            const textarea = this.$refs.commentTextarea?.$el?.querySelector('textarea');
                            if(textarea) {
                                textarea.focus();
                                // 将光标移动到文本末尾
                                const length = textarea.value.length;
                                textarea.setSelectionRange(length, length);
                            }
                        }, 100);
                    });
                }
                
				console.log('pinglun',this.pinglunzxianshi);
            },
			// ... existing methods ...
			handleBlankClick(e) {
				const isCommentArea = e.target.closest('.d-pinglun-2') || 
			                        e.target.closest('.d-tijiao-0') ||
			                        e.target.closest('.uv-search') ||
			                        e.target.closest('.uv-textarea');
			
			    // 如果点击的是非评论区域且评论框是显示状态，则关闭评论框
			    if(!isCommentArea && this.pinglunzxianshi === 1) {
			        this.pinglunzxianshi = 0;
			    }
    		},
			handleTextareaBlur() {
    		    //this.pinglunzxianshi = 0;
				setTimeout(() => {
    			    this.pinglunzxianshi = 0;
    			}, 300);
    		},
			pinglun(){
				if (!this.denglu_jiance()) return;
				this.pinglunzxianshi = 1;
				//this.$refs.hbComment.focusOn();
			},
			//提交问答 
			//tieid:帖子id,uid用户id,code密钥,rid级别,content评论内容,
			pingluninput(e){
				var duixin = this; 
			    let newStr = '<p>' + e + '</p>';
			    let pingluncontent = newStr.replace(/\n/g,"</p><p>");
				this.tiwenneirong = pingluncontent;
				//打印
				console.log('评论内容',this.tiwenneirong);
			},
			// 提交问答(评论)
			tijiao_wenda(){

				if (!this.denglu_jiance()) return;
			    console.log('提交问答');
				const data = {
					id: this.id, // 帖子ID
					cid: this.cid, // 圈子ID
					uid: this.uid, // 用户ID
					code: this.keycode, // 密钥
					rid: this.pinglun_id, // 级别（0 表示普通）
				}
				var datas = "is_ajax=1&content="+this.tiwenneirong; //评论内容
				if(this.pinglun_id) {
					console.log('回复的用户',this.pinglun_id);
				}
				var get_data = postRequest(Api.postPinglun(data.id,data.uid,data.code,data.rid),datas);
				var res;
				get_data.then(duixin_data => {
					res = duixin_data;
					if(res.data.code) {

						//this.pinglun_data = res.data.data;
						//显示提交成功
						uni.showToast({
						  title: res.data.msg,
						  icon: 'success',
						  duration: 2000
						});
						
						
						// 构造新评论对象
    					const newComment = {
    					    id: res.data.data.id || Date.now(), // 使用返回的ID或时间戳作为临时ID
    					    owner: false,
    					    hasLike: false,
    					    likeNum: 0,
    					    avatarUrl: this.$store.state.member?.avatar || '',
    					    nickName: this.$store.state.member?.name || '匿名用户',
    					    content: this.tiwenneirong,
    					    parentId: this.pinglun_id || null,
    					    createTime: new Date().toLocaleString(),
    					    children: [],
							yinyong: {
								author: this.nickName || '',
    						    content: this.yinyong_neirong || ''
    						}
    					};
						//清空输入框
						this.tiwenneirong = '';
					
    					// 将新评论添加到列表最前面
    					this.commentData.comment.unshift(newComment);
					
    					// 延迟关闭评论框
    					setTimeout(() => {
    					    this.pinglunzxianshi = 0;
    					}, 200);
						// 延迟关闭评论框，确保点击事件完成
						setTimeout(() => {
    					    this.pinglunzxianshi = 0;
    					}, 200);
						//提交回复后，把回复添加到 this.commentData.comment 里面，并且展示在第一条
						//刷新评论列表
						
						this.getPinglun_list_api(); //刷新评论列表



					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg,
						});
					}
				})

			    
			    // 这里可以添加提交问答的逻辑
			},
			handleLoadMore({page, pageSize}) {
    		    console.log('父组件-加载更多评论');
    		    this.page = page;
    		    // 这里可以添加加载更多评论的逻辑
			    this.getPinglun_list_api();
    		},
			// 评论列表
			getPinglun_list_api(){
				const params = {
    			    page: this.page || 1,
					pageSize:20,
    			    // 其他可能需要传递的参数
    			};
				
				const data = {
					id: this.id, // 帖子ID
					cid: this.cid, // 圈子ID
					uid: this.uid, // 用户ID
					code: this.keycode, // 密钥
					rid: 0, // 级别（0 表示普通）
				}
				var get_data = getRequest(Api.getPinglunNeirong(data.id,data.uid,data.code),params);
				var res;
				get_data.then(duixin_data => {
					res = duixin_data;
					if(res.data.code) {
						// 转换时间戳为日期格式
						//var list = res.data ? res.data.data : {};
						/*var list = res.data && res.data.data ? res.data.data : [];
        				this.haibao_data = list;*/
						this.pinglun_list = res.data.data;
						this.commentData.readNumer = res.data.data && res.data.data.commnets? res.data.data.commnets : 0;
						//重新 循环一下  评论列表
						/*
						"id": 1, // 唯一主键
						"owner": false, // 是否是拥有者，为true则可以删除，管理员全部为true
						"hasLike": false, // 是否点赞
						"likeNum": 2, // 点赞数量
						"avatarUrl": "", // 评论者头像地址
						"nickName": "超长昵称超长...", // 评论者昵称，昵称过长请在后端截断
						"content": "啦啦啦啦", // 评论内容
						"parentId": null, // 所属评论的唯一主键
						"createTime": "2021-07-02 16:32:07" // 创建时间
						*/
						// 格式化评论列表数据
						if(res.data.data && res.data.data.list.length > 0) {
            			    const pinglun_list_data = res.data.data && res.data.data.list.map(item => ({
								/*children : [
									{
										"id": item.rlist['id'], // 唯一主键
										"owner": false, // 是否是拥有者，为true则可以删除，管理员全部为true
										"hasLike": item.rlist['has_like'], // 是否点赞
										"likeNum": 2, // 点赞数量
										"avatarUrl": item.rlist['avatar'], // 评论者头像地址
										"nickName": item.rlist['author'], // 评论者昵称，昵称过长请在后端截断
										"content": item.rlist['content'], // 评论内容
										"parentId": null, // 所属评论的唯一主键
										"createTime": item.rlist.inputtime // 创建时间
									}
								] || [],*/
            			        id: item.id || 0,
            			        owner: item.is_owner || false,
            			        hasLike: item.has_like || false,
            			        likeNum: item.like_count || 0,
            			        avatarUrl: item.touxiang || '',
            			        nickName: item.author || '匿名用户',
            			        content: item.content || '',
            			        parentId: item.parent_id || null,
            			        createTime: item.inputtime,
								children: [], //item.rlist || 
								yinyong: item.yinyong || ''
            			    })); // .reverse()添加这行，将数组顺序反转;
            			    //this.commentData.comment = pinglun_list_data;
							// 修改这里：如果是第一页则覆盖，否则追加数据
							if(this.page === 1) {
                			    this.commentData.comment = pinglun_list_data;
                			} else {
                			    this.commentData.comment = [...this.commentData.comment, ...pinglun_list_data];
                			}
            			} else {
            			    // 没有更多数据时显示提示
            			    if(this.page > 1) {
								// 把没有更多数据的提示
            			       this.no_data = true;
            			        uni.showToast({
            			            title: '没有更多数据了',
            			            icon: 'none'
            			        });
            			    }
            			}
						//打印
						//console.log('评论列表',res.data.data && res.data.data.list);
						// 读取列表完成后直接拉到 id=“dibu”底部dibu
						// 滚动到底部
					} else {
						uni.showToast({
							icon: 'none',
							title: '获取失败，请稍后重试'
						});
					}
				})

			},
			denglu_jiance(){
				// 检查是否登录（通过Vuex状态判断）
				// 检查是否登录（通过Vuex状态判断）
  				const isLoggedIn = this.$store.state.memberuid && this.$store.state.keycode;
  				if (!isLoggedIn) {
  				  // 未登录，通过ref调用子组件的登录弹窗方法
  				  this.$refs.dToubu.dengluzhi();
  				  uni.showToast({
  				    title: '请先登录',
  				    icon: 'none'
  				  });
  				}
  				return isLoggedIn; // 返回登录状态    			    			    			    			    			    			    			    			
			},
			goumai(){
				// 先判断是否登录，如果没有登录，那么弹出 子组件中登录框
				// 检查是否登录（通过Vuex状态判断）
				if (!this.denglu_jiance()) return;
				// 已登录，执行购买逻辑
				console.log('执行购买操作');
			},
			// 退出登录
			handleLogout() {
 			  // 用户退出时关闭阅读界面
 			  this.yuedu = false;

 			  // 停止并销毁音频
 			  if(this.$refs.audioPlayer) {
 			    const audioCtx = this.$refs.audioPlayer.getAudioContext();
 			    audioCtx.stop();
 			    audioCtx.destroy();
 			  }
			   this.getDianzan_panduan_api(); // 退出登录后重新获取点赞状态
			   this.getShoucang_panduan_api(); // 退出登录后重新获取收藏判断
 			},
			// 登录
			handleLogin() {
				this.getDianzan_panduan_api(); // 登录后重新获取点赞状态
				this.getShoucang_panduan_api(); //登录后重新获取收藏判断
			},
			// 发布登录
			denglu_fabu(){
				if(this.yidenglu == 0){
					this.denglu_xianshi = 1;
				} else {
					this.denglu_xianshi = 0;	
				}
				
				console.log('发布登录',this.denglu_xianshi);
				
			},
			// 更新判断是否登录
			handleUpdateDengluxianshi(value) {
			  this.denglu_xianshi = value;
			  console.log('关闭登录',this.denglu_xianshi);
			},
			// 帖子接口
			getTiezi_api(){
				// id ,cid 参数
				const data = {
					id: this.id,
					cid: this.cid,
				}
				var get_data = getRequest(Api.getTiezi(),data);
				var res;
				get_data.then(duixin_data => {
					res = duixin_data;
					if(res.data.code) {
						// 转换时间戳为日期格式
						//var list = res.data ? res.data.data : {};
						/*var list = res.data && res.data.data ? res.data.data : [];
        				this.haibao_data = list;*/
						this.tie = res.data.data[0] || {};
						// 获取到帖子数据后再获取关注状态
						this.getGuanzhu_panduan_api();
						
					} else {
						uni.showToast({
							icon: 'none',
							title: '获取失败，请稍后重试'
						});
					}
				})

			},
			// 点赞判断
			getDianzan_panduan_api(){
				// 确保从 Vuex 获取最新值
				const uid = this.$store.state.memberuid;
                const keycode = this.$store.state.keycode;

				// id ,cid 参数
				const data = {
					id: this.id,
					cid: this.cid,
				}
				
				var get_data = getRequest(Api.getDianzan_panduan(uid,keycode),data);
				var res;
				get_data.then(duixin_data => {
					res = duixin_data;
					if(res.data.code && res.data.data.code > 2) {
						this.dianzan_panduan = 0;
						this.dianzan_shu = res.data.data.data;
					} else if(res.data.code && res.data.data.code == 1) {
						this.dianzan_panduan = 1;
						this.dianzan_shu = res.data.data.data;
					} else {
						this.dianzan_panduan = 0;
						this.dianzan_shu = res.data.data.data;
					}
				})
			},
			// 点赞头像
			getDianzan_touxiang_api(){
				var get_data = getRequest(Api.getDianzan_touxiang());
				var res;
				get_data.then(duixin_data => {
					res = duixin_data;
					if(res.data.code ) {
						this.dianzan_touxiang = res.data.data;
					} else {
						uni.showToast({
							icon: 'none',
							title: '获取失败，请稍后重试'
						});
						
					}
				})

			},
			// 点赞提交数据
			postDianzan_api(){
				// 确保从 Vuex 获取最新值
				const uid = this.$store.state.memberuid;
                const keycode = this.$store.state.keycode;
				if (!uid || !keycode) {
    			    uni.showToast({
    			        title: '未登录',
    			        icon: 'none'
    			    });
					this.denglu_xianshi = 1;
    			    return;
    			}
				// id,cid 参数
				const data = {
					id: this.id,
					cid: this.cid,
				}
				var get_data = postRequest(Api.postDianzan(uid,keycode),data);
				var res;
				get_data.then(duixin_data => {
					res = duixin_data;
					if(res.data.code==1) {
						this.dianzan_panduan = 1;
						this.dianzan_shu = res.data.data.data;
						// 提示
						uni.showToast({
							icon: 'success', //有效的 icon 值为 success, loading, none
							title: '点赞成功'
						});
						this.getDianzan_touxiang_api(); // 点赞头像
					} else {
						this.dianzan_panduan = 0;
						this.dianzan_shu = res.data.data.data;
						// 提示
						uni.showToast({
							icon:'success', //有效的 icon 值为 success, loading, none
							title: '取消点赞'
						});
						this.getDianzan_touxiang_api(); // 点赞头像
					}
				})
			},

			// 收藏判断
			getShoucang_panduan_api(){
				// 确保从 Vuex 获取最新值
				const uid = this.$store.state.memberuid;
                const keycode = this.$store.state.keycode;

				// id ,cid 参数
				const data = {
					id: this.id,
					cid: this.cid,
				}
				
				var get_data = getRequest(Api.getShoucang_panduan(uid,keycode),data);
				var res;
				get_data.then(duixin_data => {
					res = duixin_data;
					if(res.data.code && res.data.data.code > 2) {
						this.shoucang_panduan = 0;
						this.shoucang_shu = res.data.data.data;
					} else if(res.data.code && res.data.data.code == 1) {
						this.shoucang_panduan = 1;
						this.shoucang_shu = res.data.data.data;
					} else {
						this.shoucang_panduan = 0;
						this.shoucang_shu = res.data.data.data;
					}
				})
			},
			// 收藏提交数据
			postShoucang_api(){
				// 确保从 Vuex 获取最新值
				const uid = this.$store.state.memberuid;
                const keycode = this.$store.state.keycode;
				if (!uid || !keycode) {
    			    uni.showToast({
    			        title: '未登录',
    			        icon: 'none'
    			    });
					this.denglu_xianshi = 1;
    			    return;
    			}
				// id,cid 参数
				const data = {
					id: this.id,
					cid: this.cid,
				}
				var get_data = postRequest(Api.postShoucang(uid,keycode),data);
				var res;
				get_data.then(duixin_data => {
					res = duixin_data;
					if(res.data.code==1) {
						this.shoucang_panduan = 1;
						this.shoucang_shu = res.data.data.data;
						// 提示
						uni.showToast({
							icon: 'success', //有效的 icon 值为 success, loading, none
							title: '收藏成功'
						});
					} else {
						this.shoucang_panduan = 0;
						this.shoucang_shu = res.data.data.data;
						// 提示
						uni.showToast({
							icon:'success', //有效的 icon 值为 success, loading, none
							title: '取消收藏'
						});
					}
				})
			},
			huifu_2(e){
				if (!this.denglu_jiance()) return;
				console.log('huifu_2',e);
				this.pinglunzxianshi = 1;
			},
			// 判断关注
			getGuanzhu_panduan_api(){
				// 确保从 Vuex 获取最新值
				const uid = this.$store.state.memberuid;
                const keycode = this.$store.state.keycode;

				// id ,cid 参数
				const data = {
					uid: uid,
					touid: this.tie.uid,
				}
				// 打印
				console.log('touid:',this.tie);
				
				var get_data = getRequest(Api.getGuanzhu_panduan(uid,keycode),data);
				var res;
				get_data.then(duixin_data => {
					res = duixin_data;
					if(res.data.code ) {
						this.guanzhu_panduan = res.data.data && res.data.data.guanzhu;
					} else {
						this.guanzhu_panduan = 0;
					}
					
				})

			},
			// 关注提交数据
			postGuanzhu_api(){
				// 确保从 Vuex 获取最新值
				const uid = this.$store.state.memberuid;
                const keycode = this.$store.state.keycode;
				if (!uid ||!keycode) {
    			    uni.showToast({
    			        title: '未登录',
    			        icon: 'none'
    			    });
					this.denglu_xianshi = 1;
    			    return;
				}
				// id,cid 参数
				const data = {
					uid: uid,
					touid: this.tie.uid,
				}

				var get_data = postRequest(Api.postGuanzhu(uid,keycode),data);
				var res;
				get_data.then(duixin_data => {
					res = duixin_data;
					if(res.data.data && res.data.data.code==1) {
						this.guanzhu_panduan = 1;
						
						// 提示
						uni.showToast({
							icon: 'success', //有效的 icon 值为 success, loading, none
							title: '关注成功'
						});
					} else {
						this.guanzhu_panduan = 0;
						
						// 提示
						uni.showToast({
							icon:'success', //有效的 icon 值为 success, loading, none
							title: '取消关注'
						});
					}
				})

			}


			
			
  			
  			

		}
	}
</script>

<style scoped lang="scss">

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		/*justify-content: center;*/
		background-color: #f3f3f3;
        /*padding-top: 70px;*/
		height: 100vh; /* 添加全屏 */
		width: 100vw; /* 添加全屏*/

	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	/* 屏幕宽度大于786px时隐藏uni-page-head */
    @media (min-width: 786px) {
        uni-page-head {
            display: none !important;
            opacity: 0 !important;
            height: 0 !important;
            visibility: hidden !important;
        }
    }
	/* 添加在style部分 */
	.d-daohang-zuo {
    position: fixed;
    left: 0;
    
    width: 180rpx;
    height: calc(100vh - 70rpx);
    background: #f5f5f5;
    z-index: 100;
	box-shadow: 2px 0 5px rgba(177, 177, 177, 0.1);
  }
  
  .d-daohang-you {
    position: fixed;
    left: 180rpx;
    
    width: 180rpx;
    height: calc(100vh - 70rpx);
    background: #fff;
    z-index: 999;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
  }
  .d-erji-item {
    height: 60rpx;
    line-height: 60rpx;
    padding: 0 20rpx;
   /* border-bottom: 1px solid #f0f0f0;*/
  }
  
  .d-erji-item:active {
    background: #f5f5f5;
  }
  @mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.uv-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: #dadbde;
		padding: 3px 7px;
		opacity: 0.8;
        
	}
    ::v-deep .uv-navbar {
      border-radius: 20rpx;
    }

	.you-guding {
		position: fixed;

		top: 0; /* 根据头部高度调整 */
		/*box-shadow: -2px 0 5px rgba(0,0,0,0.1);*/
		transition: all 0.3s ease;
	}
	/* 大于786px时的样式 */
	@media screen and (min-width: 1024px) {
		.d-bianhua-10 {
			padding: 30px;
		}
		.pc-zuo-520 {
			margin-left: 520rpx;
		}
		.you-guding {
			position: fixed;
				
			top: 60px; /* 根据头部高度调整 */
			/*box-shadow: -2px 0 5px rgba(0,0,0,0.1);*/
			transition: all 0.3s ease;
		}
			
		
	}

			

	/*@font-face {
		font-family: 'icon';
		src: url('//at.alicdn.com/t/c/font_4943412_hwr994uqfdf.woff2?t=1749392833400') format('woff2'), url('//at.alicdn.com/t/c/font_4943412_hwr994uqfdf.woff?t=1749392833400') format('woff'),
			url('//at.alicdn.com/t/c/font_4943412_hwr994uqfdf.ttf?t=1749392833400') format('truetype');
	}*/

	.audio-control-wrapper {
		margin-top: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: 'icon' !important;
	}

	.audio-control {
		font-size: 62rpx;
		line-height: 1;
		padding: 16rpx;
		color: #12d1b1;
		font-size: 80rpx;
	}

	.audio-control-prev {
		transform: rotate(180deg);
	}

	.audio-control-switch {
		font-size: 80rpx;
		margin: 0 100rpx;
	}
	.beijing-pinglun {
		background-color: #eeeeee;
	}
	


	
</style>
